<template>
    <view class="page">
        <view class="reason devideLine">
            <view class="md4Text lgrey">
                举报原因
            </view>

            <view class="answer mdTitle">
                {{type}}
            </view>
        </view>

        <text class="mdTitle detailIntro">*具体情况说明</text>
        <view class="area">
            <textarea v-model="content" placeholder-style="color:#999999" :placeholder="desc"
                class="testArea md4Text" :maxlength="500" />
        </view>

        <text class="mdTitle detailIntro">图片证明(最多6张)</text>
        <view class="imgTip mgrey md4Text">
            直观的截图是非常有利的举报证据
        </view>
        <view class="add" style="display: flex;flex-wrap: wrap;">
            <image :src="item.fullurl" v-for="(item,index) in images" :key="index"></image>
            <image src="../../../static/imgs/detail/upload.png" mode="" @click="addImg" v-if="images.length < 6">
            </image>
        </view>

        <view class="submitLine" style="margin-top: 30rpx;" @click="save">
            <button type="default" class="submit" style="color: #fff;">提交</button>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                type: '',
                desc: '',
                job_id: 0,
                content: '',
                images: []
            }
        },
        methods: {
            addImg() {
                uni.chooseImage({
                    count: 1,
                    sourceType: ['album'],
                    success: (res) => {
                        this._upload({
                            url: '/api/common/upload',
                            filePath: res.tempFilePaths[0],
                            success: res => {
                                if (res.code == 1) {
                                    this.images.push(res.data);
                                } else {
                                    this._toast(res.msg);
                                }
                            }
                        });
                    }
                })
            },
            save() {
                if (!this.type) {
                    return this._toast('举报原因错误');
                }
                if (!this.job_id) {
                    return this._toast('举报对象错误');
                }
                if (!this.content.trim()) {
                    return this._toast('请输入具体情况说明');
                }
                var images = [];
                for(var i in this.images) {
                    images.push(this.images[i].url);
                }
                this._ajax({
                    url: '/api/user/report',
                    data: {
                        job_id: this.job_id,
                        reason: this.type,
                        content: this.content,
                        images: images.join(',')
                    },
                    success: res => {
                        this._toast(res.msg);
                        if(res.code == 1) {
                            setTimeout(() => {
                                this._toBack(2);
                            }, 1000);
                        }
                    }
                }, 1);
            }
        },
        onLoad(options) {
            this.type = options.type;
            this.job_id = options.job_id;
            this.desc = options.desc;
        }
    }
</script>

<style scoped lang="less">
    .page {
        padding: 32upx;
    }

    .reason {
        padding-bottom: 30upx;

        .answer {
            padding-top: 30upx;
            font-weight: bold;
        }
    }

    .detailIntro {
        font-weight: bold;
        display: block;
        padding: 20upx 0;
    }

    .area {
        margin: 0 auto;
        width: 100%;

        .testArea {
            width: 686upx;
            height: 224upx;
            background-color: #F1F1F1;
            border-radius: 8upx;
            color: #999999;
            padding: 32upx;
        }
    }

    .add {
        margin-top: 20upx;

        image {
            width: 200upx !important;
            height: 200upx !important;
            margin-left: 40rpx;
            margin-bottom: 30rpx;
        }

        image:nth-child(3n+1) {
            margin-left: 0;
        }

        .submitLine {
            padding-top: 48upx;
        }
    }
</style>
